<template>
	<div id="page__order-detail">
		<header class="page__header">
			<h2 class="page__title">订单详情</h2>
			<div>
				<el-button
					v-if="orderInfo.status === ORDER_UNPAID"
					size="mini"
					type="primary"
					@click="pay"
				>
					付款
				</el-button>
				<el-button
					v-if="orderInfo.status !== ORDER_DELETED"
					size="mini"
					type="danger"
					@click="deleteOrder"
				>
					删除订单
				</el-button>
			</div>
		</header>
		<div class="page__main" v-loading="loading">
			<section class="order-pane">
				<h3 class="pane-title">基础信息</h3>
				<el-row :gutter="16">
					<el-col :span="8">
						<span class="pane-label">
							订单名称
						</span>
						<span class="pane-content">
							{{orderInfo.name}}
						</span>
					</el-col>
					<el-col :span="8">
						<span class="pane-label">
							订单金额
						</span>
						<span class="pane-content">
							{{orderInfo.money}}
						</span>
					</el-col>
					<el-col :span="8">
						<span class="pane-label">
							状态
						</span>
						<span class="pane-content">
							<span :class="[orderInfo.status === ORDER_PAID ? 'success' : '']">
								{{ORDER_STATUS_MAP[orderInfo.status]}}
							</span>
						</span>
					</el-col>
				</el-row>
				<el-row :gutter="16">
					<el-col :span="8">
						<span class="pane-label">
							创建时间
						</span>
						<span class="pane-content">
							{{orderInfo.createTime}}
						</span>
					</el-col>
					<el-col :span="8">
						<span class="pane-label">
							付款时间
						</span>
						<span class="pane-content">
							{{orderInfo.payTime}}
						</span>
					</el-col>
				</el-row>
			</section>
			<section class="order-pane">
				<h3 class="pane-title">用户信息</h3>
				<el-row :gutter="16">
					<el-col :span="8">
						<span class="pane-label">
							用户名
						</span>
						<span class="pane-content">
							{{user.username}}
						</span>
					</el-col>
					<el-col :span="8">
						<span class="pane-label">
							联系电话
						</span>
						<span class="pane-content">
							{{user.phone}}
						</span>
					</el-col>
					<el-col :span="8">
						<span class="pane-label">
							邮箱
						</span>
						<span class="pane-content">
							{{user.email}}
						</span>
					</el-col>
				</el-row>
				<el-row :gutter="16">
					<el-col :span="8">
						<span class="pane-label">
							地址
						</span>
						<span class="pane-content">
							{{user.province}}{{user.city}}{{user.area}}{{user.address}}
						</span>
					</el-col>
				</el-row>
			</section>
			<section class="order-pane">
				<h3 class="pane-title">商品信息</h3>
				<div class="pane-main">
					<el-table
						:data="instList"
						:stripe="true"
						style="width: 100%">
						<el-table-column
							prop="id"
							label="商品ID"
							width="75px"
						>
						</el-table-column>
						<el-table-column
							label="图片"
							width="120px"
						>
							<template slot-scope="prop">
								<el-image :src="prop.row.img"></el-image>
							</template>
						</el-table-column>
						<el-table-column
							prop="name"
							label="商品名称"
							:show-overflow-tooltip="true"
						>
						</el-table-column>
						<el-table-column
							prop="price"
							label="单价">
						</el-table-column>
						<el-table-column
							prop="count"
							label="数量">
						</el-table-column>
					</el-table>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import * as CONSTANT from '../../config/constant'

  export default {
    name: "detail",
    data() {
      return {
        ...CONSTANT,
        orderInfo: {},
        loading: false
      }
    },
    computed: {
      user() {
        return this.orderInfo.user || {}
      },
      instList() {
        return this.orderInfo.instList || []
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler() {
          this.getOrderInfo()
        }
      }
    },
    methods: {
      getOrderInfo() {
        let {id} = this.$route.query
        if (!id) {
          this.$router.replace('/order')
          return false
        }
        this.loading = true
        let orderInfo = {}
        this.$axios.get('/order/info', {
            params: {
              id: id
            },
            abort: true
          })
          .then(({success, message, data}) => {
            if (success) {
              orderInfo = data
            } else {
              this.$message.error(message)
            }
          })
          .catch(({message}) => {
            this.$message.error(message)
          })
          .finally(() => {
            this.loading = false
            this.orderInfo = orderInfo
          })
      },
      async pay() {
        let {id} = this.$route.query
        let flag = await this.$store.dispatch('payOrder', id)
        if (flag) {
          this.getOrderInfo()
        }
      },
      async deleteOrder() {
        let {id} = this.$route.query
        let flag = await this.$store.dispatch('deleteOrder', id)
        if (flag) {
          await this.$router.replace('/order')
        }
      }
    }
  }
</script>

<style lang='less'>
	#page__order-detail {
		flex-shrink: 0;
		flex-grow: 1;
		background-color: #fff;

		.page__main {
			padding-top: 0;
		}

		.el-table__header {
			th {
				background-color: #FAFAFA;
			}
		}

		.order-pane {
			border-bottom: 1px solid #eeeeee;
			padding-bottom: 20px;

			.el-row {
				& + .el-row {
					margin-top: 16px;
				}
			}
		}

		.pane-title {
			font-size: 16px;
			color: #222;
			font-weight: bold;
			margin: 0;
			padding: 32px 0;
		}

		.pane-label {
			font-size: 14px;
			color: #666;

			&:after {
				content: "：";
			}
		}

		.pane-content {
			font-size: 14px;
			color: #222222;
		}

		.el-image {
			height: 40px;
			width: 66px;
		}

		.operate-bar {
			padding: 20px 0;
		}
	}
</style>
